<template>
    <view style="height: 100%;">
        <custom-tabbar title="我的订单" background = '#fff' />
        <view class="orderList">
			<view class="list" v-if="orderList.length">
				<view v-for="item in orderList" :key="item.id" class="item">
                    <view class="cover">
                        <image :src="item.cover" class="cover_image"></image>
                    </view>
                    <view class="flex-column" style="justify-content: space-between; margin-left: 20rpx; padding: 10rpx 0;">
                        <span style="font-size: 24rpx;color: #798195;">{{ '订单号：'+ item.orderNo }}</span>
                        <span>{{ item.title }}</span>
                        <span style="font-size: 28rpx;color: #798195;">{{ '使用期限：'+  dateFormat(item.expiryDate, 'YYYY-MM-DD') }}</span>
                        <span style="font-size: 32rpx;color: red;">{{ '￥' + item.price}}</span>
                    </view>
                </view>
			</view>
			<view class="empty" v-else>
                <image src="/static/my/order_empty.png" class="empty_image" />
                <view class="empty_text">暂无订单</view>
			</view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    import customTabbar from '@/components/customTabbar/index.vue';
    import { getMyOrderApi } from '@/apis/index';
    import { onLoad } from '@dcloudio/uni-app';
    import { dateFormat } from '@/utils/tools';
    const orderList = ref([]);
    onLoad(()=>{
        getMyOrder();
    })
    const getMyOrder = async () =>{
        const {obj} = await getMyOrderApi();
        orderList.value = obj;
    }
</script>

<style lang="scss">
page{
    height: calc(100% - 88px);
}
.orderList{
    background: #f0f2f5;
    height: 100%;
    .empty{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        color: #798195;
        .empty_image{
            width: 250rpx;
            height: 224rpx;
        }
    }
    .list{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 32rpx;
    }
    .item{
        width: calc(100% - 128rpx);
        display: flex;
        flex-direction: row;
        padding: 25rpx 32rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        margin-top: 24rpx;
        .cover{
            width: 180rpx;
            height: 240rpx;
            background: #798195;
            .cover_image{
                width: 180rpx;
                height: 240rpx;
            }
        }
    }
}
</style>